const Angle_step = 30.0;
let currentTime = Date.now();
function animate (angle) {
    let now = Date.now();
    let elapsed = now - currentTime;
    currentTime = now;
    let nextAngle = angle + (Angle_step * elapsed) / 1000.0;
    return nextAngle %= 360;
}

// 8个顶点
let posAndColorData= new Float32Array([
    // v0           color
    0.5, 0.5, 0.5,   1.0, 1.0, 1.0,
    // v1
    -0.5, 0.5, 0.5,  1.0, 0.0, 1.0,
    //v2
    -0.5, -0.5, 0.5,  1.0, 1.0, 0.0,
    // v3
    0.5, -0.5, 0.5,  0.0, 1.0, 1.0,
    // v4
    0.5, -0.5, -0.5,  1.0, 0.0, 0.0,
    // v5
    0.5, 0.5, -0.5,  0.0, 0.0, 1.0,
    // v6
    -0.5, 0.5, -0.5,  0.4, 1.0, 0.7,
    // v7
    -0.5, -0.5, -0.5,  0.6, 1.0, 1.0
]);

// 6个面
let indices = new Uint8Array([
    0, 1, 2, 0, 2, 3, // 前
    0, 3, 4, 0, 4, 5, // 右
    0, 5, 6, 0, 6, 1, // 上
    1, 6, 7, 1, 7, 2, // 左
    7, 4, 3, 7, 3, 2, // 下
    4, 7, 6, 4, 6, 5 // 后
])
function initVertexBuffers(gl) {
    let commonBuffer = gl.createBuffer();
    let indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, commonBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, posAndColorData, gl.STATIC_DRAW);
    
    let a_position = gl.getAttribLocation(program, 'a_position');
    let a_color = gl.getAttribLocation(program, 'a_color');
    let perDataSize = posAndColorData.BYTES_PER_ELEMENT;
    gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, perDataSize * 6, 0);
    gl.enableVertexAttribArray(a_position);
    gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, perDataSize * 6, perDataSize * 3);
    gl.enableVertexAttribArray(a_color);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

    return indices.length;
}

var lookAtX =3, lookAtY= 3;
var angleInRadians = 0;
let gl = getGlByCanvasId("canvas");
let program = getProgram();
gl.clearColor(0.5, 0.7, 0.4, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.useProgram(program);

let n = initVertexBuffers(gl);

let uMatLocation = gl.getUniformLocation(program, "u_matrix4");
let mvpMaxtrix = new Matrix4();
mvpMaxtrix.setPerspective(30, 1, 1, 100);

                //视点      观察点     指定上方向
mvpMaxtrix.lookAt(lookAtX, 3, 7,  0, 0, 0,  0, 1, 0);
gl.uniformMatrix4fv(uMatLocation, false, mvpMaxtrix.elements);

// DEBUG
// gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);

setInterval(()=>{
    // 通过改变视点达到旋转效果
    if (lookAtX > 20) {
        lookAtX = 0;
    }else {
        lookAtX++;
    }

    // console.log(lookAtX)
    let mvpMaxtrix = new Matrix4();
    mvpMaxtrix.setPerspective(30, 1, 1, 100);
    mvpMaxtrix.lookAt(lookAtX, lookAtY, 7,  0, 0, 0,  0, 1, 0);
    gl.uniformMatrix4fv(uMatLocation, false, mvpMaxtrix.elements);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}, 100)

let currentAngle = 0;
setInterval(()=>{
    currentAngle = animate(currentAngle); 
    // 用于旋转的矩阵
    let mat4ForRotate = new Matrix4();
    mat4ForRotate.setRotate(currentAngle, 0, 0, 2);

    let mvpMaxtrix = new Matrix4();
    mvpMaxtrix.setPerspective(30, 1, 1, 100);
    mvpMaxtrix.multiply(mat4ForRotate);
    // 不变
    mvpMaxtrix.lookAt(3, 3, 7,  0, 0, 0,  0, 1, 0);
    gl.uniformMatrix4fv(uMatLocation, false, mvpMaxtrix.elements);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}, 100)

